<template>
  <div class="app-container">
    <van-nav-bar :title="title" :left-arrow="showBack" fixed @click-left="goBack" />
    <div class="layout-content">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view></router-view>
      </keep-alive>
      <router-view v-else></router-view>
    </div>
    <div class="layout-footer" v-show="showTabBar">
      <TabBar :data="tabbars" @change="handleChange" />
    </div>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import { mapGetters } from 'vuex'
export default {
  name: 'AppLayout',
  data() {
    return {
      currentTab: 0
    }
  },
  computed: {
    ...mapGetters(['allUnRead']),
    tabbars() {
      let allUnRead = this.allUnRead
      if (allUnRead == 0) {
        allUnRead = ''
      } else if (allUnRead > 99) {
        allUnRead = '...'
      }
      return [
        {
          title: '对话',
          to: {
            name: 'ChatList'
          },
          icon: 'chat-o',
          badge: allUnRead
        },
        {
          title: '通讯录',
          to: {
            name: 'ContactList'
          },
          icon: 'friends-o'
        },
        {
          title: '关于我',
          to: {
            name: 'About'
          },
          icon: 'user-o'
        },
        {
          title: '测试',
          to: {
            name: 'Home'
          },
          icon: 'home-o'
        }
      ]
    },
    title() {
      return this.$route.meta.title || this.$route.query.title
    },
    // 默认true
    showTabBar() {
      if (this.$route.meta.tabBar === false) {
        return false
      }
      return true
    },
    // 默认true
    showNavBar() {
      if (this.$route.meta.navBar === false) {
        return false
      }
      return true
    },
    // 默认false
    showBack() {
      if (this.$route.meta.showBack === true) {
        return true
      }
      return false
    }
  },
  components: {
    TabBar
  },
  methods: {
    handleChange(v) {
      this.currentTab = v
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
